<template>
    <div class="card">
        <div :class="props.gender ? 'tag' : 'key-tag' " v-if="props.specialty">
            {{ props.specialty }}
        </div>
        <div class="msg">
            <img :src="url" alt="">
            <div class="name">
                <slot name="name"></slot>
            </div>
            <div class="position">
                <slot name="positon"></slot>
            </div>
        </div>
        <div class="operate">
            <div class="expert" v-if="props.type === 'doctor'">
                <el-button type="warning" @click="dialogVisible = true">详情</el-button>
                <el-button type="primary">预约</el-button>
                <el-dialog
                    v-model="dialogVisible"
                    title="医生详情"
                    width="35%"
                >
                    <div class="doctor-info">
                        <el-descriptions title="个人信息" :column="2" border>
                            <el-descriptions-item label="姓名">{{ props.name }}</el-descriptions-item>
                            <el-descriptions-item label="出诊时间">{{ doctorSchedules || '暂无排班信息' }}</el-descriptions-item>
                            <el-descriptions-item label="性别">{{ props.gender === 'M' ? '男' : '女' }}</el-descriptions-item>
                            <el-descriptions-item label="电话号码">{{ props.phone || '暂无电话信息' }}</el-descriptions-item>
                            <el-descriptions-item label="职称">
                                <slot name="positon"></slot>
                            </el-descriptions-item>
                            <el-descriptions-item label="电子邮箱">{{ props.email || '暂无邮箱信息' }}</el-descriptions-item>
                            <el-descriptions-item label="专长">{{ props.specialty }}</el-descriptions-item>
                            <el-descriptions-item label="所在医院">{{ hospitalName }}</el-descriptions-item>
                        </el-descriptions> 
                        <!-- <div class="info-columns">
                            <div class="left-column">
                                <div class="info-item">
                                    <span class="label">姓名:</span>
                                    <span class="value">{{ props.name }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">性别:</span>
                                    <span class="value">{{ props.gender === 'M' ? '男' : '女' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">职称:</span>
                                    <slot name="positon"></slot>
                                </div>
                                <div class="info-item">
                                    <span class="label">专长:</span>
                                    <span class="value">{{ props.specialty }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">所在医院:</span>
                                    <p class="value">{{ hospitalName || '暂无医院信息' }}</p>
                                </div>
                            </div>
                            <div class="right-column">
                                <div class="info-item">
                                    <span class="label">出诊时间:</span>
                                    <p class="value">{{ props.schedule || '暂无排班信息' }}</p>
                                </div>
                                <div class="info-item">
                                    <span class="label">电话号码:</span>
                                    <p class="value">{{ props.phone || '暂无电话信息' }}</p>
                                </div>
                                <div class="info-item">
                                    <span class="label">电子邮箱:</span>
                                    <p class="value">{{ props.email || '暂无邮箱信息' }}</p>
                                </div>
                            </div>
                        </div> -->
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" style="margin-right: 10px;">预约</el-button>
                            <el-button @click="dialogVisible = false">关闭</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <div class="department" v-if="props.type === 'department'">
                <el-link type="warning" @click="dialogVisible = true">查看详情</el-link>
                <el-link type="primary">科室专家</el-link>
                <el-dialog
                    v-model="dialogVisible"
                    title="科室详情"
                    width="35%"
                >
                    <div class="department-info">
                        <div class="info-item">
                            <span class="label">科室名称:</span>
                            <span class="value">{{ props.name }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">所在医院:</span>
                            <span class="value">{{ hospitalName || '暂无医院信息' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">科室重点:</span>
                            <span class="value">{{ props.specialty }}</span>
                        </div>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">关闭</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { getHospital, getSchedule } from '@/api/getInfo';
import { ElMessage } from 'element-plus';

defineOptions({
    name: 'IntroCard'
})
let dialogVisible = ref(false)
let props = defineProps({
    url: { 
        type: String,
        default:require('@/assets/image/ID-photo/01.jpg')
    },
    type: {
        type: String,
    },
    name: {
        type: String
    },
    gender: {
        type: String,
        default: ''
    },
    specialty: {
        type: String,
        default:'重点'
    },
    introduction: {
        type: String,
        default: ''
    },
    schedule: {
        type: String,
        default: ''
    },
    hospital: {
        type: Number,
        default: 0
    },
    phone: {
        type: String,
        default: ''
    },
    email: {
        type: String,
        default: ''
    },
    id: {
        type: Number
    }
})

// 创建一个映射对象，将英文缩写转换为中文
const dayMap = {
    Mon: '周一',
    Tue: '周二',
    Wed: '周三',
    Thu: '周四',
    Fri: '周五',
    Sat: '周六',
    Sun: '周日'
};

// 添加一个响应式对象来存储医生的排班信息
const doctorSchedules = ref(null)
// 获取排班信息
async function fetchSchedule(id) {
    try {
        const response = await getSchedule({
            doctor_id: id
        });

        // 将英文缩写转换为中文，并连接成字符串
        const scheduleText = response.data
            .map(item => dayMap[item.day_of_week] || item.day_of_week) // 使用映射进行转换
            .join('、');
        
        // 存储到响应式对象中
        doctorSchedules.value = scheduleText;
    } catch (error) {
        ElMessage.error('获取排班信息失败');
        return '暂无排班';
    }
}

// 根据性别来展示医生照片(男医生照片/女医生照片)
const url = computed(()=>{
    // 使用 require.context 来动态加载 SVG
    const requireSvg = require.context('@/assets/svg/department_svg', false, /\.svg$/);
    const requireSvgDct = require.context('@/assets/svg/doctor_svg', false, /\.svg$/);
    try {
        // 根据性别来展示医生照片(男医生照片/女医生照片)
        // 今后若每位医生都有自己的照片了，再仿照科室的方法，一一展示
        if(props.gender) {
            return requireSvgDct(`./doctor_${props.gender}.svg`);
        }
        return requireSvg(`./${props.name}.svg`);
    } catch (error) {
        console.error('Error loading SVG:', error);
        return ''; // 返回默认值或错误图标
    }
})
let hospitalName = ref('')
// 获取医院信息
async function getHospitalInfo() {
    try {
        const response = await getHospital({id: props.hospital})
        if(response && response.data && response.data[0]) {
            const res = response.data[0]
            hospitalName.value = res.name
        } else {
            hospitalName.value = '暂无医院信息'
        }
    } catch(error) {
        console.error('获取医院信息失败:', error)
        hospitalName.value = '暂无医院信息'
    }
}
onMounted(()=>{
    getHospitalInfo()
    fetchSchedule(props.id)
})
</script>

<style lang="scss" scoped>
    .card {
        width: 150px;
        padding: 5px 7px;
        margin: 10px 15px;
        border: 1px solid rgb(232.8, 233.4, 234.6);
        box-shadow: 3px 2px 10px rgb(221.7, 222.6, 224.4);
        position: relative;

        .tag {
            color: white;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: -15px;
            top: -5px;
            width: 60px;
            height: 20px;
            background-image: url('@/assets/svg/tag_svg/department_tag.svg');
            background-size: cover; /* 确保背景图像覆盖整个div */
            background-position: center; /* 居中背景图像 */
        }
        .key-tag {
            color: rgb(255, 255, 78);
            font-size: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: absolute;
            top: -9px;
            right: -5px;
            width: 28px;
            height: 70px;
            background-image: url('@/assets/svg/tag_svg/keyDepartment.svg');
            background-size: cover; /* 确保背景图像覆盖整个div */
            background-position: center; /* 居中背景图像 */
        }

        .msg {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;

            img {
                width: 120px;
            }
            .name {
                font-size: 16px;
                color: rgb(115.2, 117.6, 122.4);
            }
            .position {
                font-size: 12px;
                color: rgb(177.3, 179.4, 183.6);
            }
        }
        .operate {

            .expert {
                display: flex;
                justify-content: space-around;

                .el-button {
                    margin: 0;
                }
            }
            .department {
                display: flex;
                justify-content: space-around;
            }

        }
    }

    .doctor-info {
        padding: 20px;
        .info-columns {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            
            .left-column, .right-column {
                flex: 1;
            }
        }
        .info-item {
            margin-bottom: 15px;
            .label {
                font-weight: bold;
                margin-right: 10px;
                color: #606266;
            }
            .value {
                color: #333;
            }
        }
    }
</style>